<template>
    <div>
        <div>
            <span>指标配置一览</span>
            <el-button @click="dialogVisible=!dialogVisible" type="primary" style="float:right;">新建配置</el-button>
        </div>
        <el-divider></el-divider>
        <div>
            <!-- 搜索工具条 -->
            <div class="table-tool">
                指标配置目标：
                <el-input
                        class="table-tool-search"
                        placeholder="请输入搜索内容"
                        @keyup.enter.native="searchTable"
                        v-model="searchInput"/>
                <div class="table-tool-opt">
                    <el-button @click="searchTable" type="primary" icon="el-icon-search"></el-button>
<!--                    <el-button @click="refreshTable" type="primary" icon="el-icon-refresh"></el-button>-->
                </div>
            </div>
            <!-- 表格 -->
            <el-card class="table-card">
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="编号">
                    </el-table-column>
                    <el-table-column
                            prop="faname"
                            label="指标配置目标">
                    </el-table-column>
                    <el-table-column
                            prop="addtime"
                            label="目标设置时间"
                            width="180">
                    </el-table-column>
                    <el-table-column label="操作" width="145">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>

        <!-- 新建配置 -->
        <el-dialog
                title="新建配置"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <span>新建配置</span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
    import env from '@/utils/env'

    const EVENT_CLICK_EDIT_ROW = "rowClickEditEvent";
    export default {
        data() {
            return {
                dialogVisible: false,
                tableData: [{
                    id: '1',
                    code: 'A-01',
                    name: '生态保护红线面积',
                    unit: '平方千米',
                    prop: '正向'
                }],
                searchInput: '',
                apiUrl: ''
            }
        },
        methods: {
            // 搜索方法
            searchTable() {
                if (this.searchInput) {
                    let that = this
                    this.$axios.get(this.apiUrl + `/assessgovapp/api/indexConfig/list/?searchText=${that.searchInput}`).then(res => {
                        that.tableData = res.data.data
                    })
                } else {
                    this.initTableData()
                }
            },
            // 刷新方法（重置？）
            refreshTable() {
                this.initTableData()
            },
            // 表格当前行编辑
            handleEdit(idx, row) {
                this.$emit(EVENT_CLICK_EDIT_ROW, row)
            },
            // 表格当前行删除
            handleDelete(idx, row) {
                alert(row)
            },
            handleClose() {
                alert('handleClose')
            },
            initTableData() {
                let that = this
                this.$axios.get(this.apiUrl + '/assessgovapp/api/indexConfig/list/').then(res => {
                    that.tableData = res.data.data
                })
            }
        },
        mounted() {
            this.apiUrl = env.getApiUrl()
            this.initTableData()
        }
    }
</script>

<style lang="stylus" scoped>
    .table-tool
        position relative

        .table-tool-search
            width 200px

        .table-tool-opt
            display inline-block
            margin-left 10px

    .table-card
        margin-top 20px
</style>